<template>
  <view>
    <up-sticky bg-color="#fff" :offset-top="91">
      <up-tabs :list="tabs" @click="changeTab" lineColor="#fd7753"></up-tabs>
    </up-sticky>
    <at-card>
      <view class="flex">
        <image src="/static/icon/invite/company.png" style="width: 60rpx;height: 60rpx" mode="aspectFill"/>
        <view class="ml-20" style="flex: 1">
          <view>张三</view>
          <view class="f-s-m mt-20">面试岗位：java工程师</view>
          <view class="flex mt-10">
            <view class="work-tag">24岁</view>
            <view class="work-tag">1-3年</view>
            <view class="work-tag">本科</view>
          </view>
        </view>
        <view style="margin-left: auto" class="flex-c-center">
          <view class="f-s-m f-c-9 mb-20">09月12日</view>
          <image src="/static/icon/invite/refuse.png" style="width: 80rpx;height: 80rpx" mode="aspectFill"/>
        </view>
      </view>
    </at-card>
    <up-loadmore
        nomore-text="没有更多数据了"
        color="#fd7753"
        lineColor="#fd7753"
        line
    />
  </view>
</template>

<script setup>

import {ref} from "vue";

const tabs = ref([
  {
    name: '已邀请',
    id: 0
  },
  {
    name: '已同意',
    id: 1
  },
  {
    name: '已拒绝',
    id: 2
  }
])


const changeTab = (e) => {
  console.log(e)
}
</script>

<style lang="scss" scoped>
.work-tag {
  background: #f5f5f5;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
  color: #9d9d9d;
  font-size: 24rpx;
  margin-right: 10rpx;
}
</style>